import { getchun } from "../../tools/ajxas"
import { useState, useEffect } from "react"
import React from 'react';
import { Radio } from 'antd';
import "./cunfen.css"
import type { RadioChangeEvent } from 'antd';
function Cunfen() {
    // 标题列表
    const [titlelist, setTitlelist] = useState([])
    // 属性列表
    const [list, setList] = useState([])
    useEffect(() => {
        getchun().then(res => {
            console.log(res.data);
            // console.log(Object.keys(res.data));
            // console.log(Object.values(res.data));
            setTitlelist(Object.keys(res.data))
            setList(res.data)
        })
    }, [])
    console.log(list);

    //存储当前选中index值
    const [value, setValue] = useState("5G");
    const onChange = (e: RadioChangeEvent) => {
        console.log('radio checked', e.target.value);
        setValue(e.target.value);
    };
    // console.log(list[value]?.pic1);
    return (
        <div className="tun_box">
            <div className="tun_tu">吞吐量</div>
            <div>
                {
                    titlelist.map((item, index) => {
                        return <span key={item}>
                            <Radio.Group onChange={onChange} size="large" value={value}>
                                <Radio value={item}>{item}</Radio>
                            </Radio.Group>
                        </span>
                    })
                }
            </div>
            <div>
                {/* {list[value]} */}
                <div className="price">
                    <span>软件费：{list[value]?.p1}元</span>
                    <span>硬件费：{list[value]?.p2}元</span>
                    <span>总价：{list[value]?.total}元</span>
                </div>
                <div className="my_peizhi">
                    <div>
                        <div>软件配置图</div>
                        <img src={'http://127.0.0.1:5000/' + list[value]?.pic1} alt="" />
                    </div>
                    <div className="my_peizhi_l">
                        <div>硬件配置图</div>
                        <img src={'http://127.0.0.1:5000/' + list[value]?.pic2} alt="" />
                    </div>
                </div>
            </div>
        </div>
    )
}
export default Cunfen